<template>
    <BackGround>
      <div class="_main">
        <div class="_main_4">
          <input type="text" v-model="amount" :placeholder="$t('withdraw.amount')">
          <div @click="all">{{$t("withdraw.all")}}</div>
        </div>
        <div class="_main_3">
          {{coinId === 1? 'USDT': 'KOS'}}: {{balance}}
        </div>
        <button class="union_join" @click="withdraw">{{$t("wallet.get")}}</button>
        <div @click="jump" class="log">{{$t("withdraw.log")}}</div>
      </div>
    </BackGround>
</template>

<script>
    import BackGround from "@components/BackGround/index.vue";
    import http from "../../http";

    export default {
      data() {
        return {
          coinId: this.$route.query.coinId ? this.$route.query.coinId * 1 : 1,
          balance: '-',
          amount: ''
        }
      },
      mounted() {
        this.getWallet();
      },
      components: {
        BackGround
      },
      methods: {
        async getWallet() {
          let res = await http.get(`/api/wallet/get?id=` + this.coinId);
          this.balance = "-";
          if (res.code === 200) {
            this.balance = res.data;
          }
        },
        async withdraw() {
          if(!this.amount){
            Toast(this.$t("withdraw.tips"));
            return;
          }
          let res = await http.post(`/api/coin-log/withdraw?coinId=${this.coinId}&amount=${this.amount}`);
          if (res.code === 200) {
            Toast(this.$t("operationSuccess"));
            this.jump();
          }
        },
        jump(){
          this.$router.push("/ExtractHistory?coinId=" + this.coinId);
        },
        all(){
          this.amount = this.balance;
        }
      }
    }
</script>

<style scoped lang="scss">

  ._main {
    margin:20px auto;
    width: 340px;
    height: 200px;
    background: #2C1A0F;
    border-radius: 8px;
    padding: 15px 18px;
    text-align: left;
  }

  ._main_1 {
    font-size: 14px;
    @include fontSCRegular;
    font-weight: 400;
    color: $color1;
    line-height: 20px;

  }

  ._main_2 {
    width: 287px;
    height: 22px;
    font-size: 16px;
    @include fontSCMedium;
    font-weight: 500;
    color: $color;
    line-height: 22px;
    margin-top: 10px;
  }

  ._main_line {
    width: 100%;
    height: 1px;
    background-color: $color1;
    margin-top: 10px;
  }

  ._main_3 {
    font-size: 14px;
    @include fontSCRegular;
    color: $color;
    text-align: right;
    margin-top: 10px;
  }
  .log{
    color: $color3;
    font-size:14px;
    text-decoration: underline;
    text-align: center;
    padding: 10px 0px;
  }

  ._main_4 {
    width: 100%;
    height: 44px;
    border-radius: 2px;
    border: 1px solid $color;
    @include flex;
    padding: 0 10px;
    margin-top: 8px;
    div {
      font-size: 14px;
      @include fontSCRegular;
      font-weight: 400;
      color: $color;
    }

    input {
      font-size: 14px;
      @include fontSCRegular;
      font-weight: 400;
      color: #fff;
      background: transparent;
      outline: none;
      border: none;
      flex: 1;
      padding: 0;
    }
  }
  .input::-webkit-input-placeholder {
    color: $color1;
    font-size: 13px;
    @include fontSCRegular;
    font-weight: 400;
  }
  .input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-size: 13px;
    @include fontSCRegular;
    font-weight: 400;
    color: $color1;
  }
  .input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-size: 13px;
    @include fontSCRegular;
    font-weight: 400;
    color: $color1;
  }
  .input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-size: 13px;
    @include fontSCRegular;
    font-weight: 400;
    color: $color1;
  }
  .union_join {
    width: 100%;
    height: 44px;
    background: #d8bc84;
    border-radius: 5px;
    font-size: 17px;
    @include fontSCRegular;
    font-weight: 400;
    color: #fff;
    line-height: 44px;
    margin-top: 20px;
  }
</style>
